import React, { Component } from 'react';
import SignList from './signList';
import {ImageBackground, View,Text, StyleSheet,Dimensions,TouchableOpacity,Alert,Image,Platform} from 'react-native';
import {  Flex } from 'antd-mobile';

import {SignModule} from './../NativeToastAndroid';
import {FilmModule} from "../NativeToastAndroid";

var { height,width } = Dimensions.get('window');
class SignSBox extends Component{
    constructor(props){
        super(props)
        this.state={
            isChange:false,
            userInfo:{},
            isFreshList:false
        }
    }
    alertBox(){
        Alert.alert(
            '提示',
            '签到时间段为6:00-8:00,各位童鞋积极签到哟Ｏ（∩＿∩）Ｏ～～',
            [
                {text: '知道了'},
            ]
        )
    }
    componentWillMount(){
        this.getUserInfo();
    }
    //获取个人签到信息
    getUserInfo = ()=>{
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android') {
            SignModule.getSignInfo((data) => {
                if(data.result === 'success') {
                    const returnData = JSON.parse(data.jsonBody);
                    if (returnData.code === 0 && returnData.data !== undefined) {
                        this.setState({
                            isChange:true,
                            userInfo:returnData.data,
                            isFreshList:true
                        })
                    }else if (returnData.code !== 0) {
                        const message = returnData.message;
                        Alert.alert(
                            '提示',
                            message,
                            [
                                {text : 'OK'},
                            ]
                        )
                    }
                }else{
                    Alert.alert(
                        '提示',
                        '亲！服务器返回异常',
                        [
                            {text:'OK'},
                        ]
                    )
                }
            })
        }
    }
    //签到
    signHandle = ()=>{
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android') {
            SignModule.sign((data) => {
                if(data.result === 'success'){
                    const returnData = JSON.parse(data.jsonBody);
                    if(returnData.code === 0 && returnData.data !== undefined){
                        this.setState({
                            isChange:true,
                            userInfo:returnData.data
                        })

                    }else{
                        const message = returnData.message;
                        Alert.alert(
                            '提示',
                            message,
                            [
                                {text:'OK'},
                            ]
                        )
                    }
                }else{
                    Alert.alert(
                        '提示',
                        '亲！服务器返回异常',
                        [
                            {text:'OK'},
                        ]
                    )
                }
            })
        }
    }
    //回退
    _goBack(){
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android'){
            SignModule.onNavigationClick();
        }
    }
    _returnImage(url){
        if(url !== undefined){
            return ( <Image style={styles.myImage} source={{uri:url}} />)
        }else{
            return ( <Image style={styles.myImage} source={require('./../../../file/ic_default_head.png')} />)
        }
    }
    _returnNickName(name,number) {
        if (name !== undefined && name　!== '') {
          return(<Text numberOfLines={1} style={styles.rankMyName}>{name}</Text>)
        } else {
            return(<Text numberOfLines={1} style={styles.rankMyName}>{'i西科'+number}</Text>)
        }
    }
    render() {
        const {rank,nick_name,icon_url,sign_time,number} = this.state.userInfo
        const SignInfo = (
            <View style={styles.mySignBox}>
                <Flex style={styles.myImageBox}  direction="row" justify="center">
                    {
                        this._returnImage(icon_url)
                    }
                </Flex>
                <Flex direction="row" justify="around" style={styles.myInfoBox}>
                    <Text style={styles.rankText}>{rank}</Text>
                    {
                        this._returnNickName(nick_name,number)
                    }
                    <Text style={styles.rankMyTime}>{forrmatTime(sign_time)}</Text>
                </Flex>
            </View>
        )
        const SignBtn = (
            <View style={styles.signButtonBox}>
                <TouchableOpacity activeOpacity={0.5} onPress={this.signHandle}>
                    <Image style={styles.signBtnImage} source={require('./../../../file/sign_button.png')}/>
                </TouchableOpacity>
            </View>
        )
        return (
            <Flex direction="column" style={{backgroundColor:'#F3FAFF'}}>
                <ImageBackground style={styles.imageBackgroundBox} source={require('./../../../file/sign_background.png')}>
                        <Flex style={styles.headerBox} direction="row" justify="between">
                            <View>
                                <TouchableOpacity activeOpacity={0.5} onPress={this._goBack}>
                                <Image
                                    style={{width:25,height:25}} source={require('./../../../file/ic_arrow_back_white_24dp.png')} />
                                </TouchableOpacity>
                            </View>
                            <Text style={styles.headerText}>签到</Text>
                            <View>
                                <TouchableOpacity activeOpacity={0.5} onPress={this.alertBox}>
                                <Image
                                    style={{width:18,height:18}}  source={require('./../../../file/ic_help_outline_white_24dp.png')} />
                                </TouchableOpacity>
                            </View>
                        </Flex>
                        <View style={styles.signTitleBox}>
                            <Flex direction="row" justify="start">
                                <Text style={styles.signTitleName}>早起签到榜</Text>
                                <Text style={styles.signTitleWeek}>{getDate()}</Text>
                                <Text style={styles.signTitleDay}>{getWeek()}</Text>
                            </Flex>
                        </View>
                </ImageBackground>
                    <View style={styles.signListBox}>
                        <SignList freshFilm={this.state.isFreshList}/>
                    </View>
                    {
                        this.state.isChange ? SignInfo : SignBtn
                    }
            </Flex>
        )
    }
}

function forrmatTime(getTime) {
    let time = Date.parse(getTime);
    time = new Date(time);
    let hours  = time.getHours();
    let minutes = time.getMinutes();
    let returnTime = [hours,minutes].join(':');
    return returnTime;
}
function getDate() {
    let date = new Date();
    let month = date.getMonth()+1+'月';
    let day = date.getDay()+'日';
    let returnDate = [month,day].join('');
    return returnDate;
}
function getWeek() {
    const l = ["日","一","二","三","四","五","六"];
    let d = new Date().getDay();
    var str = "星期" + l[d];
    return str;
}
const styles = StyleSheet.create({
    imageBackgroundBox:{
        backgroundColor:'rgba(0,0,0,0)',
        width:width,
        height:'30%'
    },
    headerBox:{
        marginTop:24,
        marginLeft:15,
        marginRight:15
    },
    headerText:{
        color:'#fff',
        fontSize:20,
        lineHeight:30,
        marginLeft:-180
    },
    signTitleBox:{
        position:'absolute',
        bottom:0,
        width:width,
        height:40,
        backgroundColor:'rgba(60, 155, 245, 0.5)'
    },
    signTitleName:{
        height:40,
        color:'#fff',
        fontSize:24,
        marginLeft:8,
        lineHeight:34
    },
    signTitleWeek:{
        height:40,
        color:'#fff',
        fontSize:16,
        marginLeft:12,
        lineHeight:30
    },
    signTitleDay:{
        height:40,
        color:'#fff',
        fontSize:16,
        marginLeft:4,
        lineHeight:30
    },
    signListBox:{
        height:'50%',
        margin:8,
        marginBottom:0,
        width:width-16
    },

    //个人样式
    mySignBox:{
        position:'relative',
        bottom:0,
        paddingTop:10,
        height:"20%",
        width:'100%',
        backgroundColor:'rgba(60, 155, 245, 0.6)'
    },
    myImageBox:{
        width:'100%'
    },
    myImage:{
        width:50,
        height:50,
        borderRadius:25,
    },
    myInfoBox:{
        width:'100%'
    },
    rankText:{
        color:'#5873EB',
        fontSize:24,
        width:70
    },
    rankMyName:{
        width:100,
        color:'#5E6379',
        fontSize:16,
        alignSelf:'center'
    },
    rankMyTime:{
        color:'#5E6379',
        fontSize:18
    },

    //签到按钮
    signButtonBox:{
        position:'relative',
        bottom:0,
        height:"20%",
        width:'100%',
        backgroundColor:'#fff'
    },
    signBtnImage:{
        width:width,
        height:'97%',
    }

})
export default SignSBox;
